<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>企业环保</el-breadcrumb-item>
                        <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">供应商分类</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main" style="background: #fff;padding-top: 10px;height: 46px;">
                        <el-col :span="8" style="margin-left: 20px;">
                            <el-form-item label="分类名称" size="small">
                                <el-input v-model="form.classification_name" placeholder="请输入分类名称"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 20px;">
                            <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
                            <el-button size="small" class="empty-but" icon="refresh" @click="clear">重置</el-button>
                            <el-button size="small" :icon="Plus" class="add-but" @click="addDialog = true">新增</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div style="background: #fff;">
          <el-table :data="tableData.rows" style="width: 100%" row-key="id"
                    :default-expand-all="tableData.isExpandAll"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column align="center" prop="id" label="序号" width="60" type="index"/>
            <el-table-column align="center" prop="classification_name" label="分类名称" />
            <el-table-column align="center"  prop="parent_classification" label="父级分类" />
            <el-table-column align="center" prop="depth" label="深度" />
            <el-table-column align="center" prop="description" label="描述" />
            <el-table-column align="center" prop="creator" label="创建人" />
            <el-table-column align="center" prop="create_time" label="创建时间" width="240"
                             :formatter="function(row,column){
                              return $moment(row.create_time).format('YYYY-MM-DD HH:mm:ss')
                            }"></el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="210">
              <template #default="scope">
                <el-button link type="primary" size="small" icon="plus"
                  @click="addDetail(scope.row)" >新增</el-button>
                <el-button link type="primary" size="small" icon="edit"
                  @click="updateDetail(scope.row)" >修改</el-button>
                <el-button link type="danger" size="small" icon="delete"
                   @click="deleteRow(scope.row.id)">删除</el-button>
              </template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 20%;display: flex;justify-content: flex-end;" v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-main>
</el-container>
<!-- 新增弹窗 -->
<el-dialog v-model="addDialog" title="新增分类" width="40%">
    <div style="width:80%">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="classification_name">
                <el-input v-model="formData.classification_name" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="选择上级" prop="parent_classification">
              <el-cascader v-model="formData.parent_id" style="color:black" :options="tableData.rows" placeholder="不选是根目录"
                           :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
                </el-cascader>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
                <el-input v-model="formData.description" maxlength="500" placeholder="请输入" show-word-limit type="textarea" />
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
                <span class="dialog-footer">
                    <el-button class="sele-but" @click="add">
                        确定
                    </el-button>
                    <el-button class="empty-but" @click="addDialog = false">取消</el-button>

                </span>
            </template>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog v-model="updateDiglog" title="修改分类" width="40%">
    <div style="width: 80%">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="classification_name">
                <el-input v-model="obj.classification_name" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="选择上级" prop="parent_classification">
              <el-cascader v-model="ruleForm.parent_id" style="color:black" :options="tableData.rows"
                           :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
                </el-cascader>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="obj.description" maxlength="500" placeholder="请输入" show-word-limit type="textarea" />
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="update(obj)"> 修改 </el-button>
          <el-button class="empty-but" @click="updateDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
</div>
</template>

<script setup >
import {onMounted, reactive, ref} from 'vue'
    import {Plus} from "@element-plus/icons-vue";
    // 路由
    import {useRouter} from 'vue-router'
import {ElMessage, FormInstance, FormRules,ElMessageBox } from 'element-plus'
    import {selectAllSupplierClass,insertSupplierClass,updateSupplierClass,deleteSupplierClass} from '@/api/entPersonManage'
    import {handleTree} from '@/utils/tools.js'
const router = useRouter()
    onMounted(()=>{
      selectAll()
    })

const tableData = reactive({
  flat:{},
  isExpandAll:false,
  refreshTable:true,
  row:[],
  total:0,
});
    //查询所有
const selectAll = () => {
  selectAllSupplierClass({}).then((res)=>{
    res.data.forEach(e=>{
      tableData.flat[e.id]= e
    })
    tableData.rows = handleTree(res.data,'id','parent_id','children')
  })
}
    //根据条件查询
const form = reactive({
  num: "",
});
const selectQuery = () => {
  selectAllSupplierClass(form).then((res)=>{
    res.data.forEach(e=>{
      tableData.flat[e.id] =e;
    })
    tableData.rows = handleTree(res.data,"id","parent_id","children");
  })
}
    //重置
const clear = () => {
  form.classification_name = ""
  selectAll()
}
const parenchange = (e) =>{
  ruleForm.parent_classification =tableData.flat[e]?.classification_name||"-";
  ruleForm.depth = tableData.flat[e]?.depth+1||1;
}
const changeModify = (e) =>{
  obj.parent_classification =tableData.flat[e]?.classification_name||"-";
  obj.depth = tableData.flat[e]?.depth+1||1;
}
// 表格
const defaultProps = {
  label:"classification_name",
  value:"id",
  children:"children",
  multiple:false,
  checkStrictly:true,
  emitPath: false
}


    // 新增弹窗 表单校验
const formData =reactive({})
const ruleForm = reactive({
  classification_name: "",
  parent_id: 0,
  parent_classification: "-",
  description: "",
});
    const rules = {
      classification_name: [{
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
        }, {
            // min: 3,
            // max: 10,
            message: "请输入分类名称",
            trigger: "blur",
        }, ],
        region: [{
            required: true,
            message: '请选择上级',
            trigger: 'change',
        }, ],
    };
// 新增弹窗
const addDialog = ref(false);
        // 新增弹窗
const centerDialogVisible = ref(false)
const addDetail = (row) =>{
  selectAll()
  addDialog.value = true;
  ruleForm.classification_name = '';
  ruleForm.parent_id = row.id;
  ruleForm.parent_classification = row.classification_name;
  ruleForm.depth = row.depth+1;
  ruleForm.description = '';
}
const add = () => {
  formData.parent_classification =ruleForm.parent_classification
  formData.depth = ruleForm.depth
  console.log(formData.depth,'deeeeeeeee')
  insertSupplierClass(formData).then((res)=>{
    if (res.code === 200) {
      ElMessage.success("新增成功");
      selectAll();
      addDialog.value = false;
    } else {
      ElMessage.error("新增失败");
    }
  })
}
//删除
const deleteRow = (index) => {
  ElMessageBox.confirm("确定要删除吗?").then(()=>{
    deleteSupplierClass({id:index}).then((res)=>{
      selectAll()
    })
  })
}
//修改
const updateDiglog = ref(false)
let obj = reactive({
  classification_name:"",
  parent_id:0,
  parent_classification:"-",
  description:""
})
const updateDetail=(row)=>{
  updateDiglog.value = true
  obj.id = row.id;
  obj.classification_name = row.classification_name;
  obj.parent_id = row.parent_id;
  obj.parent_classification = row.parent_classification;
  obj.description = row.description
}
const update = (row) => {
  updateSupplierClass(row).then((res)=>{
    if(res.code ==200){
      ElMessage.success("修改成功")
      selectAll()
      updateDiglog.value = false
    }else {
      ElMessage.error("修改失败")
    }
  })
}
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
